<template>

  <div class="data-screen">

    <div class="app-title">网络名人调度驾驶舱</div>

    <div class="app-header flex">

      <div class="tab">名人</div>

      <div class="tab">数量</div>

      <div class="tab">关注</div>

      <div class="tab">外省</div>

    </div>

    <div class="app-main flex">

      <div class="left">

        <div class="card">

          <div class="title">左1标题</div>

          <div class="content">

            <div class="item">111111111111</div>

            <div class="item">222222222222</div>

            <div class="item">333333333333</div>

          </div>

        </div>

        <div class="card">

          <div class="title">左2标题</div>

          <div class="content">

            <div class="item">111111111111</div>

            <div class="item">222222222222</div>

            <div class="item">333333333333</div>

          </div>

        </div>

        <div class="card">

          <div class="title">左2标题</div>

          <div class="content">

            <div class="item">111111111111</div>

            <div class="item">222222222222</div>

            <div class="item">333333333333</div>

          </div>

        </div>

        <div class="card">

          <div class="title">左4标题</div>

          <div class="content">

            <div class="item">111111111111</div>

            <div class="item">222222222222</div>

            <div class="item">333333333333</div>

          </div>

        </div>

      </div>

      <div class="center">

        <div class="map">城市地图</div>

        <div class="bottom flex">

          <div class="card">

            <div class="title">中1标题</div>

            <div class="content">

              <div class="item">111111111111</div>

              <div class="item">222222222222</div>

              <div class="item">333333333333</div>

            </div>

          </div>

          <div class="card">

            <div class="title">中2标题</div>

            <div class="content">

              <div class="item">111111111111</div>

              <div class="item">222222222222</div>

              <div class="item">333333333333</div>

            </div>

          </div>

        </div>

      </div>

      <div class="right">

        <div class="card">

          <div class="title">右1标题</div>

          <div class="content">

            <div class="item">111111111111</div>

            <div class="item">222222222222</div>

            <div class="item">333333333333</div>

          </div>

        </div>

        <div class="card">

          <div class="title">右2标题</div>

          <div class="content">

            <div class="item">111111111111</div>

            <div class="item">222222222222</div>

            <div class="item">333333333333</div>

          </div>

        </div>

        <div class="card">

          <div class="title">右3标题</div>

          <div class="content">

            <div class="item">111111111111</div>

            <div class="item">222222222222</div>

            <div class="item">333333333333</div>

          </div>

        </div>

        <div class="card">

          <div class="title"></div>

          <div class="content">

            <div class="item">111111111111</div>

            <div class="item">222222222222</div>

            <div class="item">333333333333</div>

          </div>

        </div>

      </div>

    </div>

  </div>

</template>

<script>
 export default { name: "DataScreen" }
</script>

<style scoped>
.data-screen {
  width: 100vw;
  height: 100vh;
  font-size: 20px;
  color: #fff;
  background-image: url("/img/bg.png");
  background-size: 100% 100%;
}
.app-title {
  height: 100px;
  padding: 10px;
  font-size: 42px;
  font-weight: bold;
  text-align: center;
}
.flex {
  display: flex;
}
.app-header {
  /*  padding: 20px;*/
}
.tab {
  height: 120px;
  flex: 1;
  font-size: 32px;
  border: 1px solid blue;
  padding: 30px;
  text-align: center;
}
.app-main {
  height: calc(100vh - 220px);
  padding: 20px;
}
.card {
  overflow: hidden;
  border: 1px solid #999;
  border-radius: 10px;
  padding: 20px;
}
.card .title {
  /* padding: 18px; */
  font-size: 28px;
  font-weight: bold;
  text-indent: 2em;
  background: green;
}
.left,
.right {
  width: 25%;
}
.left .card,
.right .card {
  height: 25%;
}
.center {
  width: 50%;
}
.center .map {
  height: 65%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 100px;
  overflow: hidden;
}
.center .bottom {
  width: 100%;
  height: 35%;
}
.center .bottom .card {
  flex: 1;
}
</style>

